<template>
  <div>
    <el-card style="width: 100%" shadow="always">
      <el-button type="primary" @click="addForm">添加车辆</el-button>
    </el-card>
    <el-table :border="true" :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="车辆编号" min-width="120" />
      <el-table-column prop="type" label="车辆类型" min-width="120" />
      <el-table-column prop="department" label="所属部门" min-width="150" />
      <el-table-column prop="purchaseDate" label="购置日期" min-width="120" />
      <el-table-column prop="status" label="状态" min-width="100" />
      <el-table-column
        prop="currentLocation"
        label="当前位置"
        min-width="150"
      />
      <el-table-column prop="mileage" label="行驶里程 (km)" min-width="120" />
      <el-table-column
        prop="maintenanceRecord"
        label="维修记录"
        min-width="200"
      />
      <el-table-column prop="remarks" label="备注" min-width="200" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scoped">
          <el-button link type="primary" size="small" @click="edit(scoped.row)"
            >编辑</el-button
          >
          <el-button link type="primary" size="small" @click="del(scoped.row)"
            >删除</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="detial(scoped.row)"
            >详情信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑车辆信息对话框 -->
    <el-dialog v-model="dialogEdit" title="编辑车辆信息" width="800">
      <div class="form">
        <template v-for="field in fields" :key="field.key">
          <div class="form-item">
            <span class="title">{{ field.label }}</span>
            <div class="content">
              <el-input
                v-model="form[field.key]"
                style="width: 240px"
                :placeholder="field.label"
              />
            </div>
          </div>
        </template>
        <div class="form-handle">
          <el-button type="primary" @click="saveEdit">确定</el-button>
          <el-button type="primary" @click="dialogEdit = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 添加车辆信息对话框 -->
    <el-dialog v-model="dialogAdd" title="添加车辆信息" width="800">
      <div class="form">
        <template v-for="field in fields" :key="field.key">
          <div class="form-item">
            <span class="title">{{ field.label }}</span>
            <div class="content">
              <el-input
                v-model="form[field.key]"
                style="width: 240px"
                :placeholder="field.label"
              />
            </div>
          </div>
        </template>
        <div class="form-handle">
          <el-button type="primary" @click="saveAdd">确定</el-button>
          <el-button type="primary" @click="dialogAdd = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 详细信息对话框 -->
    <el-dialog v-model="dialogDetial" title="车辆详细信息" width="800">
      <div class="form">
        <template v-for="field in fields" :key="field.key">
          <div class="form-item">
            <span class="title">{{ field.label }}</span>
            <div class="content">
              <el-input
                disabled
                :rows="2"
                type="textarea"
                :value="detialForm[field.key]"
                style="width: 240px"
                :placeholder="field.label"
              />
            </div>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";

const fields = [
  { key: "id", label: "车辆编号" },
  { key: "type", label: "车辆类型" },
  { key: "department", label: "所属部门" },
  { key: "purchaseDate", label: "购置日期" },
  { key: "status", label: "状态" },
  { key: "currentLocation", label: "当前位置" },
  { key: "mileage", label: "行驶里程 (km)" },
  { key: "maintenanceRecord", label: "维修记录" },
  { key: "remarks", label: "备注" }
];

const detialForm = ref({
  id: "V20231101",
  type: "巡逻车",
  department: "市容管理局",
  purchaseDate: "2019-06-15",
  status: "正常",
  currentLocation: "市中心区广场",
  mileage: "45000",
  maintenanceRecord: "2024-03-15 更换轮胎",
  remarks: "定期巡查市中心，车况良好"
});

const tableData = reactive([
  {
    id: "V20231101",
    type: "巡逻车",
    department: "市容管理局",
    purchaseDate: "2019-06-15",
    status: "正常",
    currentLocation: "市中心区广场",
    mileage: "45000",
    maintenanceRecord: "2024-03-15 更换轮胎",
    remarks: "定期巡查市中心，车况良好"
  },
  {
    id: "V20231102",
    type: "清障车",
    department: "环卫科",
    purchaseDate: "2020-08-20",
    status: "维修中",
    currentLocation: "城东维修中心",
    mileage: "37000",
    maintenanceRecord: "2024-10-01 更换刹车片",
    remarks: "预计维修完毕后返回环卫科"
  },
  {
    id: "V20231103",
    type: "执法指挥车",
    department: "市政部门",
    purchaseDate: "2018-04-10",
    status: "正常",
    currentLocation: "市政大楼前",
    mileage: "60000",
    maintenanceRecord: "2024-07-20 更换机油",
    remarks: "主要用于紧急指挥和调度"
  },
  {
    id: "V20231104",
    type: "环境监测车",
    department: "环保部门",
    purchaseDate: "2021-02-28",
    status: "正常",
    currentLocation: "环保局实验区",
    mileage: "25000",
    maintenanceRecord: "2024-05-12 检修尾气排放系统",
    remarks: "装备监测仪器，用于环境监测"
  },
  {
    id: "V20231105",
    type: "应急救援车",
    department: "公共安全部",
    purchaseDate: "2017-11-05",
    status: "报废",
    currentLocation: "市区停车场",
    mileage: "80000",
    maintenanceRecord: "2023-12-10 电池老化更换一次",
    remarks: "超过使用年限，计划更换"
  },
  {
    id: "V20231106",
    type: "无人巡查车",
    department: "环境管理部",
    purchaseDate: "2022-01-15",
    status: "正常",
    currentLocation: "江边绿化带",
    mileage: "12000",
    maintenanceRecord: "2024-06-25 系统升级",
    remarks: "智能巡查无人车，定期维护"
  },
  {
    id: "V20231107",
    type: "执法摩托车",
    department: "建筑管理局",
    purchaseDate: "2020-09-10",
    status: "正常",
    currentLocation: "建筑工地入口",
    mileage: "18000",
    maintenanceRecord: "2024-08-18 更换刹车油",
    remarks: "用于小区域快速巡查"
  },
  {
    id: "V20231108",
    type: "水务维修车",
    department: "环卫科",
    purchaseDate: "2019-05-22",
    status: "正常",
    currentLocation: "市南水处理厂",
    mileage: "52000",
    maintenanceRecord: "2024-04-10 更换轮胎",
    remarks: "日常巡查及应急维修"
  }
]);

const form = ref({
  id: "",
  type: "",
  department: "",
  purchaseDate: "",
  status: "",
  currentLocation: "",
  mileage: "",
  maintenanceRecord: "",
  remarks: ""
});

const dialogEdit = ref(false);
const dialogAdd = ref(false);
const dialogDetial = ref(false);
const rowIndex = ref(0);

function edit(row) {
  dialogEdit.value = true;
  rowIndex.value = tableData.findIndex(i => i.id === row.id);
  form.value = { ...row };
}
function saveEdit() {
  setTimeout(() => {
    ElMessage({
      message: "编辑成功",
      type: "success"
    });
    dialogEdit.value = false;
  }, 500);
}
function del(row) {
  rowIndex.value = tableData.findIndex(i => i.id === row.id);
  setTimeout(() => {
    tableData.splice(rowIndex.value, 1);
    ElMessage({
      message: "删除成功",
      type: "success"
    });
  }, 500);
}
function addForm() {
  form.value = {
    id: "",
    type: "",
    department: "",
    purchaseDate: "",
    status: "",
    currentLocation: "",
    mileage: "",
    maintenanceRecord: "",
    remarks: ""
  };
  dialogAdd.value = true;
}
function saveAdd() {
  setTimeout(() => {
    tableData.push({
      id: `V2023${String(tableData.length + 1).padStart(3, "0")}`,
      ...form.value
    });
    ElMessage({
      message: "添加成功",
      type: "success"
    });
    dialogAdd.value = false;
  }, 500);
}
function detial(row) {
  detialForm.value = { ...row };
  dialogDetial.value = true;
}
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 12px;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

  .form-handle {
    display: flex;
    grid-column: span 2;
    justify-content: end;
    margin-top: 12px;
  }
}
</style>
